<template>
    <el-select v-model="pickerValue" size="small"
    @change="changeRange">
    <el-option
    v-for="item in rangeList"
    :key="item.value"
    :label="item.name"
    :value="item.value"
    />
</el-select>
</template>

<script setup>
  import { defineProps, defineEmits, ref, watch, computed } from 'vue';

  const props = defineProps({
    rangeValue: {
      type: String,
      required: true
    },
  });

  const rangeList  = ref([
  { value: 'year', name: '选择单年' },
  { value: 'month', name: '选择单月' },
  { value: 'monthrange', name: '选择月范围' },
])

  const emit = defineEmits(['update:rangeValue']);
  const pickerValue = ref(props.rangeValue);
  watch(pickerValue, (newValue) => {
    emit('update:rangeValue', newValue);
  });
  const changeRange = (value) => {
    emit('update:rangeValue', value);
  };
  </script>
   <style scoped lang="less"></style>